<template>
  <div class="site-login">
    <Header title="采购商登录" />

    <div class="site-content">
      <img class="login-bg" src="@/assets/images/site_bg.png" />

      <div class="login-form">
        <div class="tabs">
          <span @click="onTabClick">供应商登录</span>
          <span class="active">采购商登录</span>
        </div>
        <div class="form">
          <div class="form_up">
            <div class="login-form-logo">
              <img src="@/assets/images/yegoologo.png" />
              <span class="login-form-title">采购商登录</span>
            </div>
          </div>

          <el-form class="loginForm" ref="loginFormRef" :model="loginForm" :show-message="false" @keyup.enter.prevent="onLoginClick">
            <el-form-item prop="userName" required>
              <el-input v-model="loginForm.userName" class="site-input" placeholder="账号">
                <template #prefix>
                  <img src="@/assets/images/user.png" class="icon" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" required>
              <el-input v-model="loginForm.password" class="site-input" placeholder="密码" show-password>
                <template #prefix>
                  <img src="@/assets/images/password.png" class="icon" />
                </template>
              </el-input>
            </el-form-item>
            <el-alert v-if="errMessage" type="error" :closable="false">
              <template #default>
                {{ error }}
              </template>
            </el-alert>
            <el-form-item class="operate">
              <router-link class="link" to="/register">注册账号</router-link>
              <router-link class="link" to="/findPassword">忘记密码</router-link>
            </el-form-item>
            <el-form-item>
              <Button label="登 录" type="primary" class="login-button" @click="onLoginClick" :loading="loading" />
            </el-form-item>
          </el-form>
          <div class="tips">
            <el-checkbox prop="checked" v-model="loginForm.checked" required />
            <p>我已阅读并同意<span @click="() => onViewClick('clause')">《耶购网上医疗器械平台服务协议》</span>和<span @click="() => onViewClick('policy')">《耶购网上医疗器械平台隐私政策》</span></p>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { UserStore } from '@/store/user'
import api from '@/api'
import md5 from 'js-md5'
import Button from '@/components/button/button.vue'
import Footer from '@/components/footer/index.vue'
import Header from '@/components/header/login.vue'

const router = useRouter()
const _userStore = UserStore()

const loginForm = reactive({
  userName: _userStore.account,
  password: '',
  checked: false
})
const loginFormRef = ref(null)
const error = ref(null)
const errMessage = ref(false)
const loading = ref(false)
const isChecked = localStorage.getItem('_site_checked')

const login = async () => {
  loading.value = true
  let params = { userName: loginForm.userName, password: md5(loginForm.password) }
  const { data, err } = await api.post('/medinstrument/site/customer/login', params)
  loading.value = false
  if (err) {
    error.value = err
    errMessage.value = true
  } else {
    const customer = data.customer
    _userStore.login(customer)
    localStorage.setItem('_site_checked', loginForm.checked)
    router.push({ name: 'Home', state: { params: customer.reminder } })
  }
}

const onTabClick = () => {
  location.href = '/third/#/login'
}

const onLoginClick = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      if (loginForm.checked === false && isChecked !== 'true') {
        ElMessage.error('请先阅读并同意《耶购器械网站用户使用条款》和《耶购隐私政策》')
        return
      }

      login()
    }
  })
}

const onViewClick = (type) => {
  if (type === 'clause') {
    let { href } = router.resolve({ path: '/clause' })
    window.open(href, '_blank')
  } else {
    let { href } = router.resolve({ path: '/policy' })
    window.open(href, '_blank')
  }
}

onMounted(() => {
  if (isChecked === 'true') {
    loginForm.checked = true
  }
})
</script>

<style lang="less" scoped>
.site-login {
  background-image: linear-gradient(-45deg, #0dedc6 0%, #12cbd5 100%);
  height: 100%;

  .site-content {
    width: 1080px;
    min-height: calc(100% - 303px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .login-bg {
      display: inline-block;
      width: 588px;
      height: 588px;
    }
    .login-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--background);
      box-shadow: 0px 0px 10px 5px rgba(72, 81, 90, 0.05);
      border-radius: 8px;

      .tabs {
        display: flex;
        width: 100%;
        align-items: center;
        border-bottom: 1px solid var(--input-border-color);

        span {
          padding: 15px;
          flex-grow: 1;
          text-align: center;

          &.active {
            color: var(--color-primary);
          }
        }

        span:first-child {
          border-right: 1px solid var(--input-border-color);
          cursor: pointer;
        }
      }

      .form {
        padding: 30px 35px;
        position: relative;

        .loginForm {
          .el-form-item {
            margin-bottom: 0 !important;
          }

          .site-input {
            width: 280px;
            margin-top: 20px;
            border: 1px solid var(--input-border-color);
            border-radius: 20px;

            .icon {
              width: 16px;
              height: 16px;
            }
          }

          .operate {
            :deep(.el-form-item__content) {
              margin-top: 10px;
              display: flex;
              justify-content: space-between;
              padding: 0 10px;
            }

            :deep(.link) {
              text-decoration: none;
              color: var(--span-color-text);
              line-height: 16px;
              font-weight: 400;
            }
          }
        }

        .form_up {
          display: flex;
          justify-content: center;
          position: relative;

          .login-form-logo {
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              width: 70px;
              height: 70px;
            }

            span {
              margin-top: 15px;
              font-size: 16px;
              color: var(--color-text);
              letter-spacing: 0;
              text-align: justify;
              font-weight: 500;
            }
          }
        }

        .login-button {
          width: 100%;
          padding: 20px 0;
          margin: 20px 0 12px 0;
          box-sizing: border-box;
          background: var(--color-primary);
          border-radius: 20px;
          border: 0;
          font-size: 16px;
          color: var(--background);
          font-weight: 500;
        }

        .tips {
          display: flex;
          align-items: flex-start;
          font-size: 12px;
          color: var(--span-color-text);

          p {
            width: 240px;
            margin-left: 10px;
            line-height: 16px;
            white-space: wrap;
          }

          span {
            color: #027db4;
            cursor: pointer;
          }
        }

        .el-alert--error.is-light {
          margin-top: 10px;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>
